import React, {useState, useEffect} from "react";
import {connect} from 'dva';
import {history} from 'umi';
import {useAccess} from '@umijs/max';
import request from "@/utils/request";
import {PageContainer} from '@ant-design/pro-components';
import {Input, Empty, Modal, Pagination, Select, Affix, Button, Spin } from 'antd';
import { ReloadOutlined } from '@ant-design/icons';
import PileCard from '@/components/PileCard'
import styles from './index.less';


const {Search} = Input;
const Monitor: React.FC = (props: any) => {
    console.log('props', props);
    console.log('history', history);
    const {location: {pathname = ''} = {}} = history;
    const {dispatch, pileList = [], total, pageNum, loading, stationId, pileCode} = props;
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [stationList, setList] = useState([])
    const access = useAccess();
    // console.log('useAccess', access);
    useEffect(() => {
        dispatch({
            type: 'monitor/init',
        })
    }, []);
    useEffect(() => {
        request('/api1/baseFunction/stationPageList', {
            method: 'post',
            data: {
                pageNum: 1,
                pageSize: 9999
            }
        }).then((res) => {
            console.log('全部站', res);
            if (res && res.code === 200) {
                setList(res?.data?.records || [])
            }
        })
    }, [dispatch]);
    console.log('station', stationList);
    const options = stationList.length ? stationList.map((i) => {
        return {
            value: i.id,
            label: i.stationName,
        }
    }) : []
    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const onSearch = (value: string, _e: any, info: any) => {
        console.log(info?.source, value);
        console.log('onSearch', value);
        dispatch({
            type: 'monitor/load',
            payload: {
                pageNum: 1,
                pageSize: 10
            }
        })
    };
    const onChange = (value: string) => {
        console.log(`selected ${value}`);
        dispatch({
            type: 'monitor/setState',
            payload: {
                stationId: value
            }
        })
    };
    return (
        <PageContainer
            ghost
            header={{
                title: pathname && pathname === '/home' ? '工作台' : '',
            }}
        >
            <div
                className={styles.contentWrap}
                style={{marginTop: pathname && pathname === '/home' ? '-5px' : 0}}
            >
                <div className={styles.equWrap}>
                    <div className={styles.content}>
                        <div className={styles.bar}>
                            <Select
                                style={{width: 250, marginRight: 12}}
                                showSearch
                                allowClear
                                onClear={() => dispatch({type: 'monitor/setState', payload: { stationId: undefined,}})}
                                placeholder="请选择场站"
                                optionFilterProp="label"
                                onChange={onChange}
                                value={stationId}
                                // onSearch={onSelectSearch}
                                options={[...options]}
                            />
                            <Search
                                style={{width: 399}}
                                placeholder="搜索桩编码"
                                onChange={(e) => {
                                    dispatch({
                                        type: 'monitor/setState',
                                        payload: {
                                            pileCode: e.target.value
                                        }
                                    })
                                }}
                                value={pileCode}
                                onSearch={onSearch}
                                enterButton
                            />
                        </div>
                        <div className={styles.pilesWrap}>
                            {
                                pileList && pileList.length ? pileList.map((i: any) => <div key={i.id}
                                                                                            className={styles.singlePile}>
                                        <PileCard curPile={i} showModal={showModal} dispatch={dispatch}/>
                                    </div>) :
                                    <Empty
                                        style={{
                                            width: '100%',
                                            display: 'flex',
                                            justifyContent: 'center',
                                            alignItems: 'center',
                                            marginTop: '100px'
                                        }}
                                    />
                            }
                        </div>
                    </div>
                </div>
            </div>
            <div className={styles.pageWarp}>
                <Pagination
                    current={pageNum}
                    total={total}
                    pageSizeOptions={[10, 20, 30, 50, 100]}
                    showTotal={(t) => `共${t}条`}
                    onChange={(page, pageSize) => {
                        dispatch({
                            type: 'monitor/load',
                            payload: {
                                pileCode,
                                pageNum: page,
                                pageSize: pageSize || 10
                            }
                        })
                    }}
                />
            </div>
            <Modal title="基本参数" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <p><span style={{fontWeight: 'bold'}}>桩编号:</span> Some contents...</p>
            </Modal>
            <Affix offsetBottom={200} style={{width: '92%', margin: '0 auto', textAlign: 'right'}}>
                <Button
                    title='手动刷新'
                    type="primary"
                    shape="circle"
                    icon={<ReloadOutlined style={{fontSize: '16px'}} />}
                    onClick={() =>{
                        dispatch({
                            type: 'monitor/load',
                            payload: {
                                pageNum,
                                pageSize: 10
                            }
                        })
                    }}
                />
            </Affix>
            {
                loading ? <Spin tip="Loading..." spinning={loading} fullscreen /> : null
            }
        </PageContainer>
    )
};

export default connect(({
        monitor = {},
        loading: {
            effects: {
                'monitor/load': loading = false
            } = {}
        } = {}
    }: any) => {
    return {...monitor, loading}
})(Monitor);
